<template>
  <view class="elderly-form-page">
    <!-- 顶部导航 -->
<!--    <view class="page-navbar">
      <view class="nav-left" @click="handleNavigateBack">
        <text class="icon">←</text>
        <text class="nav-text">返回</text>
      </view>
      <text class="nav-title">添加老人信息</text>
      <view class="nav-right" @click="handleSubmit">
        <text class="submit-btn">提交</text>
      </view>
    </view> -->

    <!-- 表单内容 -->
      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">姓名</text>
        <input
          v-model="form.name"
          type="text"
          placeholder="请输入老人姓名"
          class="input-field"
          :adjust-position="false"
        />
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <text class="label">性别</text>
        <view class="radio-group">
          <label
            class="radio-item"
            v-for="(item, index) in genderOptions"
            :key="index"
            @click="form.gender = item.value"
          >
            <view class="radio-circle" :class="{ checked: form.gender === item.value }"></view>
            <text class="radio-text">{{ item.text }}</text>
          </label>
        </view>
      </view>

      <!-- 生日 -->
      <view class="form-item">
        <text class="label">生日</text>
        <wd-datetime-picker
          v-model="form.birthday"
          mode="date"
		  type="date" 
          :fields="fields"
          :formatter="dateFormatter"
          class="datetime-picker"
        />
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <text class="label">手机号</text>
        <input
          v-model="form.phone"
          type="number"
          placeholder="请输入手机号"
          class="input-field"
          maxlength="11"
          :adjust-position="false"
        />
      </view>

      <!-- 身份证号 -->
      <view class="form-item">
        <text class="label">身份证号</text>
        <input
          v-model="form.idCard"
          type="text"
          placeholder="请输入身份证号"
          class="input-field"
          maxlength="18"
          :adjust-position="false"
        />
      </view>

      <!-- 与老人关系 -->
      <view class="form-item">
        <text class="label">与老人关系</text>
      <!--  <picker
          mode="selector"
          :range="relationOptions"
          :range-key="'text'"
          :value="selectedRelationIndex"
          @change="handleRelationChange"
          class="picker-custom"
        >
          <view class="picker-view">
            <text class="picker-text">{{ selectedRelation?.text || '请选择关系' }}</text>
            <wd-icon name="arrow-down" size="20rpx" color="#999"></wd-icon>
          </view>
        </picker> -->
		<picker
		  mode="selector" 
		  :range="relationOptions" 
		  :range-key="'text'" 
		  :value="selectedRelationIndex" 
		  @change="handleRelationChange"
		>
		  <view class="picker-view">
		    {{ selectedType?.text || '请选择数据类型' }}
		    <wd-icon name="arrow-down" size="20rpx" color="#999"></wd-icon>
		  </view>
		</picker>
      </view>
	  
	  <wd-button block>提交</wd-button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs' // 引入day.js

// 关系选项
const relationOptions = ref([
  { text: '子女', value: '子女' },
  { text: '配偶', value: '配偶' },
  { text: '父母', value: '父母' },
  { text: '其他亲属', value: '其他亲属' },
  { text: '护工', value: '护工' }
])

const selectedRelationIndex = ref(0)
const selectedRelation = computed(() => {
  return relationOptions.value[selectedRelationIndex.value] || {}
})

// 性别选项
const genderOptions = ref([
  { text: '男', value: '男' },
  { text: '女', value: '女' }
])

// 表单数据
const form = ref({
  name: '',
  gender: '',
  birthday: Date.now(),
  phone: '',
  idCard: '',
})

// 日期范围配置
const startDate = ref('1900-01-01')
const endDate = ref(new Date().toISOString().split('T')[0])

// 日期格式化配置
const fields = ref('day') // 仅显示年月日

// 计算属性：格式化后的生日
const displayBirthday = computed(() => {
  return dayjs(form.value.birthday).format('YYYY-MM-DD')
})

// 日期格式化函数
// 日期格式化
const dateFormatter = (type, value) => {
  switch (type) {
    case 'year': return `${value}年`
    case 'month': return `${value}月`
    case 'date': return `${value}日`
    default: return value
  }
}

// 事件处理
const handleRelationChange = (e) => {
  selectedRelationIndex.value = e.detail.value
}

const handleNavigateBack = () => {
  uni.navigateBack()
}

// 表单提交
const handleSubmit = () => {
  if (!validateForm()) return

  const submitData = {
    name: form.value.name,
    gender: form.value.gender,
    birthday: displayBirthday.value,
    phone: form.value.phone.trim(),
    idCard: form.value.idCard.trim().toUpperCase(),
    relation: selectedRelation.value.text
  }

  uni.showLoading({ title: '提交中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '保存成功', icon: 'success' })
    setTimeout(() => uni.navigateBack(), 1500)
  }, 800)
}

// 表单验证
const validateForm = () => {
  if (!form.value.name) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return false
  }
  if (!form.value.gender) {
    uni.showToast({ title: '请选择性别', icon: 'none' })
    return false
  }
  if (!form.value.birthday) {
    uni.showToast({ title: '请选择生日', icon: 'none' })
    return false
  }
  if (!/^(1[3-9]\d{9})$/.test(form.value.phone)) {
    uni.showToast({ title: '手机号格式错误', icon: 'none' })
    return false
  }
  if (!/(^\d{15}$)|(^\d{17}([0-9]|X))$/i.test(form.value.idCard)) {
    uni.showToast({ title: '身份证号格式错误', icon: 'none' })
    return false
  }
  if (!selectedRelation.value.text) {
    uni.showToast({ title: '请选择与老人关系', icon: 'none' })
    return false
  }
  return true
}
</script>

<style lang="scss" scoped>
$primary: #1890ff;
$text: #333;
$border: #e5e7eb;
$bg: #fff;
$radius: 12rpx;
$height: 72rpx;
$font-size: 28rpx;

.elderly-form-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 0 30rpx;
  padding-bottom: 40rpx;
  box-sizing: border-box;
  padding-top:50rpx;

  .page-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    background: #fff;
    padding: 0 16rpx;
    margin-bottom: 24rpx;
    border-bottom: 1rpx solid #eee;

    .nav-left {
      display: flex;
      align-items: center;
      gap: 8rpx;
    }

    .nav-text {
      font-size: 30rpx;
      color: $text;
      font-weight: 500;
    }

    .nav-title {
      flex: 1;
      text-align: center;
      font-size: 34rpx;
      font-weight: 600;
      color: $text;
    }

    .nav-right {
      .submit-btn {
        color: $primary;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }

  .content-container {
    height: calc(100vh - 120rpx);
  }

  .form-item {
    margin-bottom: 40rpx;
  }

  .label {
    // display: block;
    // font-size: $font-size;
    // color: $text;
    // font-weight: 500;
    // margin-bottom: 16rpx;
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 24rpx;
	letter-spacing: 0.3rpx;
  }

  .input-field {
    width: 100%;
    height: $height;
    padding: 0 20rpx;
    background: $bg;
    border: 1rpx solid $border;
    border-radius: $radius;
    font-size: $font-size;
    color: $text;
    box-sizing: border-box;
    line-height: $height;
  }

  /* 性别选择器优化 */
  .radio-group {
	  background-color: #fff;
	  height: 80rpx;
	  padding-left:30rpx;
    display: flex;
    gap: 60rpx;
	border-radius: 16rpx!important;
	border: 1rpx solid #e5e7eb!important;
  }

  .radio-item {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  .radio-circle {
    width: 32rpx;
    height: 32rpx;
    border: 1rpx solid #ccc;
    border-radius: 50%;
    transition: all 0.2s ease;
  }

  .radio-circle.checked {
    border-color: $primary;
    background: $primary;
  }

  .radio-text {
    font-size: $font-size;
    color: $text;
  }

  /* 日期选择器样式 */
  .datetime-picker {
    .uni-picker-view-indicator {
      height: 52px !important;
    }
    .uni-picker-view-content {
      padding: 0 30rpx;
    }
  }

  /* 关系选择器优化 */
  .picker-custom {
    width: 100%;
    height: $height;
    background: $bg;
    border: 1rpx solid $border;
    border-radius: $radius;
    padding: 0 20rpx;
    box-sizing: border-box;
    position: relative;
  }

  .picker-view {
    position: relative;
    padding-right: 30rpx;
  }

  .picker-text {
    flex: 1;
    text-align: left;
    font-size: $font-size;
  }

  .arrow {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 28rpx;
  }
}

  .picker-view, wd-datetime-picker {
    height: 72rpx;
    background: #fff;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    border: 1rpx solid #e5e7eb;

    &:active {
      border-color: #1890ff;
      box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.1);
    }

    .wd-icon {
      opacity: 0.7;
      transition: all 0.2s;
      flex-shrink: 0;
    }
  }
  .picker-view {
  	  padding-left: 30rpx;
    .label-text {
      margin-right: 12rpx;
    }
  }
  :deep(.wd-cell) {
    border-radius: 16rpx!important;
    border: 1rpx solid #e5e7eb!important;
  }
  
  :deep(.wd-icon-arrow-down) {
    font-size: 32rpx!important;
    padding-right: 30rpx;
  }
</style>